<template>
  <div class="item">
    <router-link :to="{name: 'ArticleDetail',params: { id: article.id }}">
      <el-image class="img" :src="article.cover" />
    </router-link>
    <div class="right">
      <router-link :to="{name: 'ArticleDetail',params: { id: article.id }}">
        <a target="_blank" class="title">{{ article.title }}</a>
      </router-link>
      <div>
        <p class="desc">{{ article.description }}</p>
      </div>
      <div class="info">
        <router-link :to="{name: 'User',params: { id: article.userId }}">
          <a target="_blank"><span>{{ article.username }}</span></a>
        </router-link>
        <span class="date">{{ formatTime }}</span>
      </div>
    </div>
    <span class="statistics">{{ article.readCount }} 阅读</span>
  </div>

</template>

<script>
export default {
  props: {
    article: Object()
  },
  data() {
    return {

    }
  },
  computed: {
    formatTime: function() {
      if (this.article) {
        const dt = new Date(this.article.createTime)
        const month = dt.getMonth() + 1
        const date = dt.getDate()
        return `${month}月${date}日`
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  margin-top: 52px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    font-size: 0;
}
.el-image{
    height: 98px;
    width: 98px;
    max-width: 98px;
}
.img:hover{
  filter:alpha(Opacity=80);
  -moz-opacity:0.8;
  opacity: 0.8;
}
.right {
    margin-left: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    .title {
      line-height: 20px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
        font-weight: 700;
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #333;
      padding-right: 80px;
      max-height: 20px;
      -webkit-line-clamp: 1;
    }
    .desc {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #666;
      max-height: 40px;
      -webkit-line-clamp: 2;
    }
}
.info a:first-child {
    background-color: transparent;
    margin-left: 0;
    padding: 0;
}
.info span:first-child {
    margin-left: 0;
}
.info a:first-child span {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #999;
    line-height: 14px;
}
.info span {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #999;
    margin-left: 18px;
    line-height: 14px;
}
info a {
    background: #f1f5f9;
    border-radius: 19px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #999;
    padding: 2px 10px;
    text-decoration: none;
    margin-left: 18px;
    line-height: 12px;
}
.statistics {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #ccc;
    position: absolute;
    right: 0;
    top: 0;
}

</style>
